<template>
	<view>
		<uni-popup type="bottom" ref="yuyue">
			<view class="bg-white radiusTop" style="padding-bottom: 140rpx;">
				<uni-section title="选择日期时间" type="circle">
					<template v-slot:right>
						<view @click="yuyueclose" class="cuIcon-close"></view>
					</template>
					<!-- 
					<view class="mine-actions grid col-4 text-center">
						<view class="action-item " v-for="item in timeList">
							<view class=" margin-sm radius mendianTap">
								<view class="font-title juzhong">
									{{item}}:00
								</view>
								<view class="font-content font-11 juzhong">
									空闲
								</view>
							</view>


						</view>
					</view> -->


					<smh-time-range :hoursList="timeList" :time="HoursAdnMinutes" @confrim="confrim" @cancel="cancel">
					</smh-time-range>


					<view class="menu-list radius " style="">
						<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
							<view class="menu-item-box ">
								<view>位置包间</view>
								<view class="text-right">{{data.title}}</view>
							</view>
						</view>

						<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
							<view class="menu-item-box">
								<view>开始时间</view>
								<view class="text-right">
									{{data.date}} {{data.time}}
								</view>
							</view>
						</view>
						<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
							<view class="menu-item-box">
								<view>时长</view>
								<view class="text-right">
									{{data.hourNumber}}小时
								</view>
							</view>
						</view>


					</view>
					<view style="" class="padding-sm">

						<button @click="confirm" class="login-btn cu-btn block bg-pink lg round ">
							立即下单
						</button>
						<text class="juzhong font-11 font-content">未开始消费前,可取消并退款</text>
					</view>
				</uni-section>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	import {
		compareDates,
		formatDate
	} from '../../utils/validate';
	export default {
		name: "yuyue",
		data() {
			return {
				data: {},
				timeList: [],
				HoursAdnMinutes: [],
			};
		},
		created() {

			this.getHoursM()
		},
		onShow() {},
		methods: {
			confrim(e) {
				this.data.time = e.time

				this.$forceUpdate()
			},
			cancel(e) {

			},
			open(data) {
				this.data = data

				//如果所选日期不是今天 那时间段就是24小时
				console.log("房间日期" + data.date);
				console.log(compareDates(data.date, formatDate(new Date())));
				if (compareDates(data.date, formatDate(new Date())) == 0) {
					this.getHoursM()
					this.getHoursFromNow(null)

					this.HoursAdnMinutes[0] = 0
				} else {
					this.getHoursFromNow(0)
					this.HoursAdnMinutes = [0, 0]
				}

				this.$refs.yuyue.open()

			},
			yuyueclose() {
				this.$refs.yuyue.close()
			},
			getHoursFromNow(date) {
				let hoursFrom21 = 0
				let hours = [];
				if (date == null) {
					let now = new Date();
					hoursFrom21 = now.getHours(); // 获取当前小时数
				}

				for (let i = hoursFrom21; i < hoursFrom21 + 24; i++) {
					// 将小时数添加到数组中，如果超过24小时，则从0开始
					let a = i % 24
					if (a == 0) {
						// a = '次'
					}
					hours.push(a);
				}

				this.timeList = hours;
			},
			/**
			 * 当前时分
			 */
			getHoursM() {
				let now = new Date();
				let h = now.getHours(); // 获取当前小时数
				let m = now.getMinutes(); // 获取当前小时数
				this.HoursAdnMinutes = [h, m]

			},
			//确认下单
			confirm() {
				uni.navigateTo({
					url: "/pages/common/confirmOrder/confirmOrder"
				})
			}
		}
	}
</script>

<style>
	.mendianTap {
		margin-top: 10rpx;
		padding: 1px 4px;
		border: solid #cacaca 1px;
		margin-right: 10rpx;
		font-weight: bold;
		border-radius: 5px;
	}
</style>